<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入</title>
    <script>

        var checkUserName = function(){
            var userName = document.getElementById('userName');
            // 为空
            if(userName.value==null || userName.value.length==0){
                alert('用户名不可以为空');
                return false;
            }
            // 长度6-20
            if(userName.value.length<6|| userName.value.length>20){
                alert('用户名长度必须6-20');
                return false;
            }

            return true;
        }

        var checkUserPsd = function(){
            var userPsd = document.getElementById('userPsd');
            // 为空
            if(userPsd.value==null || userPsd.value.length==0){
                alert('密码不可以为空');
                return false;
            }
            // 长度6-20
            if(userPsd.value.length<6|| userPsd.value.length>20){
                alert('密码长度必须6-20');
                return false;
            }

            return true;
        }

        var checkForm = function () {
            if(checkUserName() && checkUserPsd()){  // 截断流
                return true;
            }
            return false;
        }

    </script>
</head>
<body>
<form action="http://www.baidu.com" method="post" onsubmit="return checkForm();">

    <table border="1">
        <tr>
            <td>账号：</td>
            <td><input name="userName" id="userName"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input name="userPsd" type="password" id="userPsd" /></td>
        </tr>
        <tr>
            <td colspan="2">

                <input type="submit" value="  登 录  "/>
                <a href="zhuce.html">注册</a>
            </td>
        </tr>
    </table>

</form>
</body>
</html>